<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>故障字体效果</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .font24 {
            width: 156px;
            height: 98px;
            position: relative;
            font-size: 70px;
            font-weight: 900;
            color: transparent;
            letter-spacing: 10px;
            z-index: 10;
            animation: text-skew 4s linear infinite;
        }

        .font24:before,
        .font24:after {
            display: block;
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
        }

        .font24:before {
            animation: text-light 1s alternate-reverse infinite;
            color: #ff0000;
            z-index: -5;
            text-shadow: 2px 2px 0 #00ff00;
            mix-blend-mode: darken;
        }

        .font24:after {
            animation: text-light2 0.5s alternate-reverse infinite;
            color: #00ff00;
            z-index: -10;
            text-shadow: 2px 2px 0 #ff0000;
        }

        @keyframes text-light {
            10% {
                transform: translate(-2px, 4px);
            }

            50% {
                transform: translate(2px, 2px);
            }

            100% {
                transform: translate(-4px, 4px);
            }
        }

        @keyframes text-light2 {
            0% {
                transform: translate(0, 0);
            }

            20% {
                transform: translate(-2px, 2px);
            }

            40% {
                transform: translate(-2px, 2px);
            }

            60% {
                transform: translate(2px, -2px);
            }

            80% {
                transform: translate(2px, 2px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes text-skew {
            29% {
                color: transparent;
                transform: skew(0deg, 0deg);
            }

            30% {
                color: #000000;
                transform: skew(10deg, 40deg);
            }

            31% {
                color: transparent;
                transform: skew(0deg, 0deg);
            }

            69% {
                color: transparent;
                transform: skew(0deg, 0deg);
            }

            70% {
                color: #000000;
                transform: skew(180deg, 10deg);
            }

            71% {
                color: transparent;
                transform: skew(0deg, 0deg);
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="font24" data-text="404">404</div>
    </div>
</body>

</html>